<template>
	<view class="edit_company_data_wrap">
	<!-- 表单盒子 -->
	<view class="form_box">
		<!-- 标题 -->
		<view class="form_item_box">
			<!-- <text class="label">标题</text> -->
			<wd-input type="text" v-model="cardStore.currentEditCompanyIntroduceInfo.title" placeholder="请输入标题,最大长度为20"></wd-input>
		</view>
		<!-- 内容 -->
		<view class="form_item_box">
			<!-- <text class="label">内容</text> -->
			<wd-textarea v-model="cardStore.currentEditCompanyIntroduceInfo.contentText" placeholder="请输入内容" />
		</view>
		
		<!-- 图片 -->
		<view class="form_item_box">
			<wd-upload
			   loading-type="circular-ring"
			  :file-list="fileList"
			  :limit="4"
			  :action="`${baseUrl}/upload/image`"
			  @change="handleChange"
			></wd-upload>
		</view>
		
		
		<!-- 确定按钮 -->
		<view class="btn_box">
			<wd-button type="success" size="large" @click="confirmClick">确定</wd-button>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		onMounted
	} from 'vue'
	export default defineComponent({
		name: 'EditCompanyIntroduce',
	})
</script>
<script setup>
	import {
		useUserStore
	} from '@/stores/user.js'
	import { useCardStore }  from '@/stores/card.js'
	import {
		getOpenIdApi
	} from '@/api/user.js'
	import { baseUrl } from '@/libs/baseUrl.js'

	const userStore = useUserStore()
	const cardStore = useCardStore()
	
	
	const fileList = ref([
	  // {
	  //   url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
	  // }
	])


// 确定按钮点击事件
const confirmClick = ()=>{
	/* 非空校验----------------------------------------------- */
	if(cardStore.currentEditCompanyIntroduceInfo.title==""){
		uni.showToast({
			title:"标题不能为空",
			icon:"none",
			mask:true,
			duration:1000
		})
		return
	}
	if(cardStore.currentEditCompanyIntroduceInfo.contentText==""){
		uni.showToast({
			title:"内容不能为空",
			icon:"none",
			mask:true,
			duration:1000
		})
		return
	}
	// 先判断是添加还是修改
	if(cardStore.isAdd){
		// 添加
		cardStore.companyIntroduceList.push({
			id:cardStore.companyIntroduceList.length == 0 ? 1 : cardStore.companyIntroduceList[cardStore.companyIntroduceList.length-1].id + 1,
			title:cardStore.currentEditCompanyIntroduceInfo.title,
			contentText:cardStore.currentEditCompanyIntroduceInfo.contentText,
			contentImages:confirmDisposeImgArr()
		})
		uni.navigateBack()
	}else {
		// 修改
		cardStore.companyIntroduceList.forEach((item)=>{
			if(item.id == cardStore.currentEditCompanyIntroduceInfo.id){
				item.title = cardStore.currentEditCompanyIntroduceInfo.title
				item.contentText = cardStore.currentEditCompanyIntroduceInfo.contentText
				item.contentImages =confirmDisposeImgArr()
			}
		})
		uni.navigateBack()
	}
	// console.log('标题',cardStore.currentEditCompanyIntroduceInfo.title);
	// console.log('内容',cardStore.currentEditCompanyIntroduceInfo.contentText);
	// console.log('标题',confirmDisposeImgArr());
}

  // 初始化处理图片数组
	const initDisposeImgArr = () =>{
		let nArr = []
		cardStore.currentEditCompanyIntroduceInfo.contentImages.forEach((img)=>{
			nArr.push({
				url:img
			})
		})
		console.log('nArr',nArr);
		fileList.value = nArr
	}
	
	// 确定时处理图片数组
	const confirmDisposeImgArr = () =>{
		let arr = []
		fileList.value.forEach((item)=>{
			arr.push(item.url)
		})
		return arr
	}
	
	
	onMounted(() => {
		
		initDisposeImgArr()
	})
	
	
	const handleChange = (e)=>{
		console.log('e',e.fileList);
		let urlArr = []
		e.fileList.forEach((item)=>{
			if(item.response){
				let res = JSON.parse(item.response)
				urlArr.push({
					url:res.data
				})
			}else{
				urlArr.push({
					url:item.url
				})
			}
		})
		// cardStore.currentEditCompanyIntroduceInfo.contentImages =urlArr
		fileList.value = urlArr
		console.log('fileList',fileList.value);
	}
</script>

<style lang="scss" scoped>
	.edit_company_data_wrap{
		width: 100vw;
		min-height: 100vh;
		background-color: #f2f8ff;
		box-sizing: border-box;
		padding: 10px;
		
		.form_box{
			width: 100%;
			height: 600px;
			border-radius: 8px;
			background: white;
			padding: 20px 10px;
			box-sizing: border-box;
			
			.form_item_box{
				margin-bottom: 20px;
				width: 100%;
				// display: flex;
				// flex-direction: row;
				// border: 1px solid red;
				line-height: 36px;
				box-sizing: border-box;
				padding: 0px 0px 0px 8px;
				
				
				
				
				.label{
					display: inline-block;
					// margin
				  color: #686a6d;
					margin-right: 6px;
					letter-spacing: 1px;
				}
			}
		}
	}
	
	
	:deep(.wd-input){
		  width: 100% !important;
			color: #ccc;
			letter-spacing: 1px;
			
			.wd-input__body {
				width: 100% !important;
				
				.wd-input__value{
					width: 100% !important;
					
					.wd-input__inner{
							width: 100% !important;
					}
				}
			}
	}
	
	
	:deep(.wd-textarea){
		background-color: #f7f7f7 !important;
		padding: 4px 4px !important;
		border-radius: 4px;
		
		.wd-textarea__value {
			padding: 0 !important;
			.wd-textarea__inner {
				padding: 4px 4px !important;
				background-color: #f7f7f7 !important;
			}
		}
	}
	
	.btn_box{
		margin-top: 80px;
		width: 100%;
		box-sizing: border-box;
		padding: 0px 20px;
	}
	
	:deep(.wd-button){
		width: 100% !important;
	}
</style>